<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.item1 {
			grid-area: header;
		}

		.item2 {
			grid-area: menu;
		}

		.item3 {
			grid-area: main;
			min-height: 500px;
		}

		.item4 {
			grid-area: right;
		}

		.item5 {
			grid-area: footer;
			height: 40px;
		}

		.grid-container {
			display: grid;
			grid-template-areas:
				'header header header header header header' /* 容器里面有几个 当前行为几个 一般为1到3行*/
				'menu main main main main right'
				'footer footer footer footer footer footer';
			grid-gap: 10px;
			background-color: #2196F3;
			padding: 5px;
		}

		.grid-container>div {
			background-color: rgba(255, 255, 255, 0.8);
			text-align: center;
			padding: 5px 0;
			font-size: 30px;
		}
	</style>
	<body>
		<h1>网格布局</h1>

		<p>这个网格布局包含六列三行：</p>

		<div class="grid-container">
			<div class="item1">Header</div>
			<div class="item2">Menu</div>
			<div class="item3">Main</div>
			<div class="item4">Right</div>
			<div class="item5">Footer</div>
		</div>
	</body>
</html>
